<template>
  <div class="idle_main">
    <v-header headTitle="发布闲置" goBack="true" right-title="发布"></v-header>
    <div class="text_content">
      <el-input
        type="textarea"
        :rows="6"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>
    </div>
    <div class="upload_img">
      <el-upload
        class="upload-demo"
        multiple
        list-type="picture-card"
        action="https://api.zgwyzxw.cn/files"
        :headers="headers"
        :data="prefix"
        accept="image/png, image/jpeg, image/gif, image/jpg"
        ref="upload"
        :file-list="fileList"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog v-model="dialogVisible" size="tiny">
        <img width="98px" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
    <div class="input_row">
      <input type="text" placeholder="请输入发布闲置物品的名称">
    </div>
    <div class="mode_row" @click="toMode()">
      <div class="mode_title">
        <img src="./images/fangshi@2x.png" alt="">
        <span>方式</span>
      </div>
      <div class="mode_mode">
        <span>请选一个交易方式</span>
        <img src="./images/fanhui1@2x.png" alt="">
      </div>
    </div>
    <div class="classify_row" @click="toClassify()">
      <div class="mode_title">
        <img src="./images/fenlei@2x.png" alt="">
        <span>分类</span>
      </div>
      <div class="mode_mode">
        <span>请选择物品分类</span>
        <img src="./images/fanhui1@2x.png" alt="">
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .idle_main {
    width: 100%;
    padding-top: 40px;
    .text_content {
      width: 100%;
      text-align: center;
      background: #fff;
      padding-top: 10px;
      padding-bottom: 10px;
      .el-textarea {
        width: 90%;
        display: inline-block;
        outline: none;
      }
    }
    .upload_img {
      width: 100%;
      background: #fff;
      padding-bottom: 10px;
      div:first-child {
        width: 90%;
        margin-left: 5%;
      }
      .el-upload-list--picture-card .el-upload-list__item {
        width: 98px;
        height: 98px;
        svg {
          width: 60px;
          height: 60px;
          display: block;
          margin-left: 30px;
          margin-top: 60px;
        }
      }
      .el-upload--picture-card {
        width: 98px;
        height: 98px;
        text-align: center;
        li {
          width: 98px;
          height: 98px;
        }
        .el-icon-plus {
          display: block;
          line-height: 98px;
        }
      }
    }
    .input_row {
      width: 100%;
      height: 44px;
      text-align: center;
      margin-top: 10px;
      background: #fff;
      input {
        width: 90%;
        height: 100%;
        outline: none;
        border: none;
        color: #777777;
        font-size: 14px;
      }
    }
    .mode_row {
      width: 100%;
      height: 44px;
      flex-direction: row;
      background: #fff;
      margin-top: 10px;
      .mode_title {
        width: 50%;
        height: 100%;
        float: left;
        img {
          width: 20px;
          height: 20px;
          padding-top: 12px;
          padding-left: 20px;
          float: left;
        }
        span {
          line-height: 44px;
          padding-left: 5px;
          font-size: 15px;
          color: #666666;
        }
      }
      .mode_mode {
        width: 50%;
        height: 100%;
        float: right;
        text-align: right;
        line-height: 44px;
        span {
          font-size: 15px;
          padding-right: 10px;
          color: #666666;
        }
        img {
          width: 10px;
          height: 15px;
          padding-right: 20px;
        }
      }
    }
    .classify_row {
      width: 100%;
      height: 44px;
      flex-direction: row;
      margin-top: 10px;
      background: #fff;
      .mode_title {
        width: 50%;
        height: 100%;
        float: left;
        img {
          width: 15px;
          height: 20px;
          padding-top: 12px;
          padding-left: 20px;
          float: left;
        }
        span {
          line-height: 44px;
          padding-left: 5px;
          font-size: 15px;
          color: #666666;
        }
      }
      .mode_mode {
        width: 50%;
        height: 100%;
        float: right;
        text-align: right;
        line-height: 44px;
        span {
          font-size: 15px;
          padding-right: 10px;
          color: #666666;
        }
        img {
          width: 10px;
          height: 15px;
          padding-right: 20px;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import { loadToken } from '../../common/js/cache'
  import { getPictures } from '../../http/uploadPicture'
  import { delList } from '../../http/article'

  export default {
    name: 'PublishIdle',
    components: {
      'v-header': headTop
    },
    props: {
      path: {
        type: String
      }
    },
    data () {
      return {
        textarea: '',
        dialogImageUrl: '',
        dialogVisible: false,
        fileList: []
      }
    },
    computed: {
      headers () {
        return {
          'Authorization': `Bearer ${loadToken()}\n`
        }
      },
      prefix () {
        return {
          prefix: 'picture/' + this.path + '/'
        }
      }
    },
    methods: {
      handleSuccess () {
        // console.log(1111)
      },
      _getPictures () {
        let path = 'picture/' + this.path + '/'
        getPictures(path, loadToken()).then((res) => {
          this.fileList = res.data
        })
      },
      handleRemove (file, fileList) {
        let id = file.id
        this._delList(id)
      },
      _delList (id) {
        delList(id, loadToken()).then((res) => {
          this.$message({
            type: 'success',
            message: '图片删除成功'
          })
        })
      },
      toMode () {
        this.$router.push('/publish/Mode')
      },
      toClassify () {
        this.$router.push('/publish/Classify')
      }
    }
  }
</script>
